// myMsgBox.js
import MsgBoxComponent from '../components/commonvue/myMsgBox.vue'

let $vm

export default {
    install(Vue, options) {
        if (!$vm) {
            const msgBoxPlugin = Vue.extend(MsgBoxComponent);

            $vm = new msgBoxPlugin({
                el: document.createElement('div')
            });

            document.body.appendChild($vm.$el);
        }

        $vm.show = false;

        let msgBox = {
            show(options) {
                $vm.show = true;
                if(options.title){
                  $vm.title = options.title;
                }
                if(options.text){
                  $vm.text = options.text;
                }
                if(options.showCancelBtn){
                  $vm.showCancelBtn = options.showCancelBtn;
                }
                if(options.showConfirmBtn){
                  $vm.showConfirmBtn = options.showConfirmBtn;
                }
                if(options.CancelFunction){
                  $vm.CancelFunction = options.CancelFunction;
                }
                if(options.ConfirmFunction){
                  $vm.ConfirmFunction = options.ConfirmFunction;
                }

            },
            hide() {
                $vm.show = false;
            }
        };

        if (!Vue.$msgBox) {
            Vue.$msgBox = msgBox;
        }

        // Vue.prototype.$msgBox = Vue.$msgBox;

        Vue.mixin({
            created() {
                this.$msgBox = Vue.$msgBox;
            }
        })
    }
}

// 以上我们新建一个msgBox.js文件，引入我们的msgBox.vue组件，然后通过Vue.extend()方法创建了一个构造器msgBoxPlugin，其次我们再通过new msgBoxPlugin()创建了$vm实例，并挂载到一个div元素上。最后我们需要通过document.body.appendChild($vm.$el)将其插入到DOM节点中。

// 当我们创建了$vm实例后，我们可以访问该实例的属性和方法，比如通过$vm.show就可以改变msgBox组件的show值来控制其显示隐藏。

// 最终我们通过Vue.mixin或者Vue.prototype.$msgBox来全局添加了$msgBox事件，其又包含了show和hide两个方法。我们可以直接在页面中使用this.$msgBox.show()来显示加载，使用this.$msgBox.hide()来关闭加载。
